<style>
table {
	width: 100%;
	border: 1px solid #bbb;
}
table thead th {
	text-align: left;
	white-space: nowrap;
	padding: 0px 6px;
	border: 1px solid #b2b2b2;
	border-width: 0px 1px 1px 0px;
	height: 16px !important;
	line-height: 16px !important;
	font-size: 12px;
	font-weight: normal;
	overflow: hidden;
}
table th:last-child {
	border-right: none;
}
table td {
	white-space: nowrap;
	padding: 0px 8px;
	height: 20px;
	line-height: 20px;
	background: #fff;
	border: none;
}
table tr.table-tr-odd td {
	background: #f3f3f3;
}
table tr:nth-child(odd) td {
	background: #f3f3f3;
}
table tr:hover > td, table tr.table-tr-hovered td {
	background-color: #d4e7f8;
	color: #000;
	cursor: pointer;
}
table tr.selected td, table tr.table-tr-selected td, table tr.selected td a, table tr.table-tr-selected td a {
	background-color: #3875d7;
	color: #fff;
}
</style>
<p>
	You should be able to select rows in the table below. Holding down shift and clicking on numerous rows should behave as you would expect, selecting and deselecting multiple rows. Keyboard support should also allow you to move up and down and select rows with space or enter. Hitting shift + space or enter should select multiple rows.
</p>
<div id="table1"></div>
<p>
	The table below is not multi-selectable. You can hold shift and use the arrows or click, but it will only ever select one row.
</p>
<div id="table2"></div>
<!-- no html -->
<script src="/depender/build?require=More/HtmlTable.Select"></script>
<script>
var data = [
	{"id":56,"timezone":"Europe/Amsterdam","name":"Amsterdam","geolat":52.3789,"geolong":4.90067},
	{"id":46,"timezone":"America/New_York","name":"Atlanta","geolat":33.7525,"geolong":-84.3888},
	{"id":42,"timezone":"America/Chicago","name":"Austin","geolat":30.2669,"geolong":-97.7428},
	{"id":63,"timezone":"America/New_York","name":"Baltimore","geolat":39.294255,"geolong":-76.614275},
	{"id":24,"timezone":"America/New_York","name":"Boston","geolat":42.3583,"geolong":-71.0603},
	{"id":32,"timezone":"America/Chicago","name":"Chicago","geolat":41.8858,"geolong":-87.6181},
	{"id":64,"timezone":"America/New_York","name":"Cleveland","geolat":41.499819,"geolong":-81.693716},
	{"id":43,"timezone":"America/Chicago","name":"Dallas / Fort Worth","geolat":32.7887,"geolong":-96.7676},
	{"id":25,"timezone":"America/Denver","name":"Denver","geolat":39.734,"geolong":-105.026},
	{"id":47,"timezone":"America/New_York","name":"Detroit","geolat":42.3333,"geolong":-83.0484},
	{"id":48,"timezone":"America/Chicago","name":"Houston","geolat":29.7594,"geolong":-95.3594},
	{"id":66,"timezone":"America/New_York","name":"Indianapolis","geolat":39.767016,"geolong":-86.156255},
	{"id":65,"timezone":"America/Chicago","name":"Kansas City","geolat":39.090431,"geolong":-94.583644},
	{"id":49,"timezone":"America/Los_Angeles","name":"Las Vegas","geolat":36.1721,"geolong":-115.122}
];
var myArray = data.map(function(item){
	return [item.id, item.name, item.timezone, item.geolat, item.geolong];
});

var myTable = new HtmlTable({
	shiftForMultiSelect: true,
	properties : {
		border : 1,
		cellspacing : 0,
		cellpadding : 5
	},
	rows : myArray,
	headers : ['ID', 'TimeZone', 'Name', 'GEO Latitude', 'GEO Longitude'],
	sortable : true,
	selectable: true,
	parsers : ['number', 'string', 'string', 'float', 'float']

});
$(myTable).inject($('table1'));


var myTable2 = new HtmlTable({
	properties : {
		border : 1,
		cellspacing : 0,
		cellpadding : 5
	},
	rows : myArray,
	headers : ['ID', 'TimeZone', 'Name', 'GEO Latitude', 'GEO Longitude'],
	sortable : true,
	selectable: true,
	allowMultiSelect: false,
	parsers : ['number', 'string', 'string', 'float', 'float']

});
$(myTable2).inject($('table2'));

</script>
